import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Toast } from 'antd-mobile';
import './wode.scss';
export default class Wode extends Component{
    goback () {
        this.props.history.go(-1);
    }
    goHome () {
        this.props.history.push('/home');
    }
    constructor(props) {
        super(props);
        this.state = {
            islogin:true,
            uname:""
        }
    }
      unlogin() {
          var Uname = document.cookie.split(";")[0].split("=")[0];
          if (document.cookie) {
               var date = new Date();
               date.setTime(date.getTime() - 10000);
              document.cookie = Uname + "=v; expires=" + date.toGMTString();
              Toast.success('已成功退出登录', 1);
              this.props.history.go(0);
          }
      }
    componentDidMount () {
        console.log(document.cookie.split(";")[0].split("=")[1]);
        var UserName = document.cookie.split(";")[0].split("=")[1];
        if (UserName) {
             this.setState({
                 uname: UserName,
                  islogin: true
             })
        } else {
            this.setState({
                uname: "xxx",
                islogin: false
            })
        }
    }

    render () {
        // console.log(this.props.location);
        return (
            <div className="wode">
                <div className="headbox">
                <div className="lx-head">
                    <i className="iconfont icon-left-angle" onClick={this.goback.bind(this)}></i>
                    <span>我的聚美</span>
                    <i className="iconfont icon-home1" onClick={this.goHome.bind(this)}></i>
                </div>
                < div className = {
                    `user-unlogin ${this.state.islogin?'isdisplay':""}`
                } >
                    <div className="noportrait"></div>
                    <ul>
                        <li className="tabs"><Link to="/register">注册</Link></li>
                        <li className="line">|</li>
                        <li className="tabs"><Link to="/login">登录</Link></li>
                    </ul>
                    </div>
                    <div className={`user-login ${this.state.islogin?"":'isdisplay'}`}>
                        <div className="noportrait-login"></div>
                        <div className="huiyuan">
                            <span>{this.state.uname}</span>
                            <div className="grade">普通会员</div>
                        </div>
                     <ul>
                        <li><p className="iconfont icon-xinyuan1"></p><p className="sz">心愿单</p></li>
                        <li><p className="iconfont icon-ai253"></p><p className="sz">开售提醒</p></li>
                        <li><p className="iconfont icon-shoucang"></p><p className="sz">收藏</p></li>
                    </ul>
                </div>
                </div>
                <div className="dingdannav">
                    <div className="Dingdanup">
                        <div className="left"><i className="iconfont icon-order"></i>&ensp;<span>我的订单</span></div>
                        <div className="right"><span>查看我的全部订单</span>&ensp;<i className="icon-right iconfont"></i></div>
                    </div>
                    <ul>
                        <li><p className="iconfont icon-daifukuan"></p><p className="sz">待付款</p></li>
                        <li><p className="iconfont icon-daishouhuo"></p><p className="sz">待收货</p></li>
                        <li><p className="iconfont icon-daipingjia"></p><p className="sz">待评价</p></li>
                        <li><p className="iconfont icon-tuikuan"></p><p className="sz">退货/退款</p></li>
                    </ul>
                </div>
                <div className="money">
                    <div className="moneyup">
                        <div className="left"><i className="iconfont icon-wodezichan"></i>&ensp;<span>我的资产</span></div>
                        <div className="right"></div>
                    </div>
                    <ul>
                        <li><p className="sz">现金券</p></li>
                        <li><p className="sz">红包</p></li>
                        <li><p className="sz">聚美余额</p></li>
                        <li><p className="sz">礼品卡</p></li>
                    </ul>
                </div>
                <div className="booklist">
                    <div className="sale">
                        <div className="left"><i className="iconfont icon-shouhoufuwu"></i>&ensp;<span>售后服务</span></div>
                        <div className="right"><span>&ensp;</span>&ensp;<i className="icon-right iconfont"></i></div>
                    </div>
                     <div className="advice">
                        <div className="left"><i className="iconfont icon-yijianfankui"></i>&ensp;<span>意见反馈</span></div>
                        <div className="right"><span>&ensp;</span>&ensp;<i className="icon-right iconfont"></i></div>
                    </div>
                     <div className="address">
                        <div className="left"><i className="iconfont icon-shouhuodizhi"></i>&ensp;<span>收货地址</span></div>
                        <div className="right"><span>&ensp;</span>&ensp;<i className="icon-right iconfont"></i></div>
                    </div>
                     <div className="logout" onClick={this.unlogin.bind(this)}>
                        <div className="left"><i className="iconfont icon-tuichudenglu"></i>&ensp;<span>退出登录</span></div>
                        <div className="right"><span>&ensp;</span>&ensp;<i className="icon-right iconfont"></i></div>
                    </div>
                     <div className="tel">
                        <div className="left"><i className="iconfont icon-zuoji"></i>&ensp;<span>400-123-8888</span></div>
                        <div className="right"><span>&ensp;</span>&ensp;<i className="icon-right iconfont"></i></div>
                    </div>
                </div>
                <div className="hint">
                    客服热线400-123-8888 (8:00-22:00)
                    <br/>
                    拨打前请记录您的UID  0
                </div>
           </div>
        )
    }
}
